<template>
	<!-- 会议中心详情 -->
	<div class="public_content news_content over-h">
		<!--左侧导航区开始-->
		<div class="public_content_left news_slide">
			<ul class="public_nav_vertical">
				<li>
					<div class="public_nav_vertical_title">
						<img src="~@/assets/img/meeting_icon_nav.png" class="po-re top-2b" alt="新闻图标">
						<span class="fcolor-00">会议</span>
					</div>
					<dl class="public_nav_vertical_child">
		                <dd v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'child_click_dd':index==current}">
							<!-- <router-link :to="{path: '/news-detail'}"> -->
							<div class="fcolor-99 p-0-20">
								{{ item.name }}<i class="child_click_i"></i>
							</div>
							<!-- </router-link> -->
		                </dd>                    						       
					</dl>
				</li>
			</ul>    			
		</div>
		<!--左侧导航区结束-->
		<!--右侧内容-->	
		<div class="public_content_right over-h">
		    <div class="public_content_right_l pr-10 pull-left w-630  hr-sr-gray2">
				<!--会议详情区开始-->
				<div class="over-h">
					<!--左侧图片开始-->
					<div class="w-240 h-180 pull-left mr-20">
					    <img src="~@/assets/img/5ad071d14ad27.jpg" class="di-b w-all ">
					</div>
					<div class="pull-right">
					    <h2 class="fsize-24 fcolor-11">交警支队党支部大会</h2>
					    <div class="fcolor-33 fsize-14 lh-30 mt-10">
					        <p>
					            <span>会议时间：</span>
					            <span>2018-03-21 10:32 至 2018-03-21 10:34</span>
					        </p>
					        <p>
					            <span>会议地址：</span>
					            <span>河南三门峡</span>
					        </p>
					        <p>
					            <span>主&nbsp;&nbsp;持&nbsp;&nbsp;人：</span>
					            <span>王佳</span>
					        </p>
					        <p>
					            <span class="pull-left">简&emsp;&emsp;介：</span>
					            <span class="di-ib pull-left w-300 fcolor-808080 lh-26">123123121231231</span>
					        </p>
					    </div>
					</div>
				</div>
				<!--参会人员-->
				<div class="mt-20">
				    <p>
				        <i class="public_mark_org"></i>
				        参会人员
				    </p>
				    <!--人员头像列表开始-->
				    <div class="meeting_attendee">
						<div class="meeting_photo meeting_photo_style">
                            <div class="meeting_photo_img">
                                <img src="~@/assets/img/headerImg.png" alt="">
                            </div>
                            <p class="meeting_photo_name center">
								cl<i class="meeting_sign-in_fingermark"></i>
							</p>
                        </div>
						<div class="meeting_photo meeting_photo_style">
						    <div class="meeting_photo_img">
						        <img src="~@/assets/img/headerImg.png" alt="">
						    </div>
						    <p class="meeting_photo_name center">
								cl<i class="meeting_sign-in_fingermark"></i>
							</p>
						</div>
				    </div>
				</div>
				<!-- 议会内容 -->
				<div class="meeting_content mt-20">
				    <p>
				        <i class="public_mark_org"></i>
				        议会内容
				    </p>
				    <div class="meeting_list_detail">
				    </div>
				</div>
		    </div>
		    <!--热点问题-->
			<div class="public_content_right_r pull-right w-280 slide_r_news">
			    <div class="public_card_title">
			        <span class="fsize-16">热点问题</span>
			    </div>
			    <ol class="public_card_content news_newsranking">
			        <li class="lh-30">
						<router-link :to="{path: '/news-detail'}">
							习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军 
						</router-link>
			        </li>
					<li class="lh-30">
			            <router-link :to="{path: '/news-detail'}">
			            	2018年第一大队支部会员会学习计划 
			            </router-link>
			        </li>
					<li class="lh-30">
			            <router-link :to="{path: '/news-detail'}">
			            	人民日报评论员：一以贯之全面从严治党
			            </router-link>
			        </li>
				</ol>
			</div> 
		</div>	
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				id:'',
				navList:[
					{name:'支部大会'},
					{name:'支委会议'},
					{name:'党小组会'},
					{name:'党课'},
					{name:'其它'}
				],
				current:null   //当前高亮的左侧导航下标
			}
		},
		mounted(){
			this.init()
		},
		methods: {
			init(){
				this.id = this.$route.params.id;
				console.log(this.$route.params.id)
				this.$parent.$data.current = 6
			},
			addClassHandle(index){
				this.current = index
			}
		}
	}
</script>

<style scoped>
	.public_content{
		box-sizing: border-box;
		width: 1200px;
		margin: 10px auto;
		padding: 0 16px;
		margin-bottom: 30px;
		border-radius: 3px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		background-color: #f8f4eb;
	}
	/* 左侧导航 */
	.public_content_left{
		width: 200px;
		float: left;
		background: #fff;
	}
	.public_nav_vertical{
    box-shadow: 0 0 12px 0 rgba(4, 0, 0, 0.12);
    border: solid 1px rgba(245, 245, 245, 1);
}
.public_nav_vertical li .public_nav_vertical_title{
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
    font-family: 微软雅黑;
    border-bottom: solid 1px #dfdfdf;
}
.public_nav_vertical dl dd{
    border-bottom: solid 1px #f5f5f5;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}
.public_nav_vertical dl dd a{
    display: block;
    padding: 0 20px;
    font-weight: 500;
    color: #999;
}
.public_nav_vertical dl dd i{
    float: right;
    margin-top: 16px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-width: 5px 0 5px 8px;
    text-align: right;
}
.public_nav_vertical_child dd:hover{
    background: rgba(255, 235, 235, .8);
}
.public_nav_vertical_child .child_click_dd{
    background: rgba(255, 235, 235, .8);
}
.child_click_dd .child_click_i{
    border-color: transparent transparent transparent #cc0000;
}
	/*左侧导航结束*/
	/* 右侧内容 */
	.public_content_right{
		width: 960px;
		min-height: 440px;
		box-sizing: border-box;
		padding: 16px;
		float: right;
		background: #fff;
	}
	.public_content_right_l{
		min-height: 440px;
	}
	.public_mark_org{
		display: inline-block;
		height: 18px;
		width: 4px;
		background-color:  #ff9776;
		margin-right: 10px;
	}
	.meeting_attendee{
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
	}
	.meeting_photo{
    display: inline-block;
}
.meeting_photo_style{
    width: 72px;
    height: 90px;
    margin: 10px 6px 0 0;
}
.meeting_photo_name{
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}
.meeting_photo_img{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}
.meeting_sign-in_fingermark, .meeting_sign-in_phone{
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 2px;
}
.meeting_sign-in_fingermark{
    background: url("~@/assets/img/meeting_sign-in_fingermark.png");
}
	
	ol.public_card_content{
		padding-left: 22px;
	}
	ol.public_card_content > li{
		display: list-item;
		list-style: decimal;
		width: 100%;
		vertical-align: top;
		font-size: 14px;
		counter-increment: chapter;
	}
	.public_card_content a{
		color: #333;
		display: inline-block;
		width: 100%;
		vertical-align: top;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.public_card_content li:hover > a{
		color: #ff3032;
	}
</style>